<!DOCTYPE html>
<!-- 网页 -->
<html lang="en">
<!-- 网页头部 -->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网页标题</title><!-- 出现在浏览器标签页 -->
</head>
<!-- 网页的身子 -->
<body>
  
</body>
</html>

<!-- 

  HTML是网页的结构
  CSS是网页的表现
  JavaScript是网页的行为交互

  W3C标准

  HTML(Hypertext Markup Language)超文本标记语言

1. **文档类型声明 (`<!DOCTYPE html>`)：**
   - `<!DOCTYPE html>`是文档类型声明，通知浏览器使用HTML5解析文档。这是HTML文档的第一行。

2. **`<html>`元素：**
   - `<html>`元素是整个HTML文档的根元素，包裹了文档的全部内容。`lang`属性表示文档的语言，常用的值有 "en"（英语）和 "zh"（中文）等。

3. **`<head>`元素：**
   - `<head>`元素包含了与文档有关但不直接在页面中显示的元信息（metadata）。这些信息可以包括文档的字符集、关键词、描述、作者等。
   - `<meta charset="UTF-8">`设置文档使用UTF-8字符集，以支持多语言字符。
   - `<meta name="viewport" content="width=device-width, initial-scale=1.0">`用于移动设备的响应式设计，确保文档在各种屏幕尺寸上正常显示。
   - `<title>`定义文档的标题，显示在浏览器的标题栏或页签上。

4. **`<body>`元素：**
   - `<body>`元素包含了文档的可见内容，如文本、图像、链接等。这部分内容是用户在浏览器中看到的页面主体。

在`<body>`元素中，你可以添加各种HTML标签，如段落(`<p>`)、标题(`<h1>`~`<h6>`)、链接(`<a>`)、图像(`<img>`)等，以构建页面的内容。

整个HTML文档结构的理解对于创建正确的网页至关重要。合理利用各个部分，确保文档的语法正确性和良好的组织结构，有助于提高网页的可维护性和可读性。



meta定义文档元信息

<meta>` 元素是HTML中用于定义文档元信息（metadata）的标签。元信息是关于文档的数据，通常不直接显示在页面上，而是提供有关文档的信息给浏览器、搜索引擎和其他 Web 服务。

以下是一些常用的 `
<meta>` 元素及其作用：

1. **字符集设置：**
- 用于指定文档的字符集。例如，`
<meta charset="UTF-8">` 表示文档使用 UTF-8 字符集。这是确保文档正确解析和显示各种字符的重要设置。

```html
<meta charset="UTF-8">
```

2. **视口设置：**
- 用于控制移动设备上浏览器的视口（viewport），以确保网页在不同设备上以最佳方式显示。这对于响应式设计非常重要。

```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```

- 上述例子中，`width=device-width` 表示视口宽度等于设备的宽度，`initial-scale=1.0` 表示初始缩放比例为1.0。

3. **描述和关键词：**
- 用于提供有关文档内容的描述和关键词，有助于搜索引擎更好地理解和索引页面。

```html
<meta name="description" content="网页描述">
<meta name="keywords" content="关键词1, 关键词2, 关键词3">
```

4. **作者和版权：**
- 提供有关文档作者和版权的信息。

```html
<meta name="author" content="作者名">
<meta name="copyright" content="版权信息">
```

5. **刷新和重定向：**
- 用于指定文档的刷新间隔或自动重定向。

```html
<meta http-equiv="refresh" content="5;url=http://example.com">
```

- 上述例子表示在加载页面后等待5秒，然后重定向到指定的URL。

`
<meta>` 元素是一种非常强大的工具，能够提供关键的信息，确保文档在各种环境中正确显示和被理解。在实际开发中，根据具体需求选择合适的 `
<meta>` 设置是很重要的一步。
 -->